<template>
	<view>
		<view class="search_center">
			<!-- 左边输入框内容开始 -->
			<view class="search_input">
				<icon type="search"></icon>
				<input placeholder="输入商品名" v-model="inputVal"></input>
			</view>
			<!-- 左边输入框内容结束 -->
			<!-- 右边按钮开始 -->
			<view class="search_btn" @tap="handleSearch">搜索</view>
			<!-- 右边按钮结束 -->
		</view>
		<!-- 搜索列表开始 -->
		<GoodsList :goods_list="goods_list" />
		<!-- 搜索列表结束 -->
	</view>
</template>

<script>
	import GoodsList from "@/components/goods-list.vue"
	export default {
		components:{
			GoodsList
		},
		data() {
			return {
				inputVal: "", //用来存放输入框的值
				goods_list: [
					// {
					//   "goods_id": 57444,
					//   "goods_name": "创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）"
					// },
					// {
					//   "goods_id": 57444,
					//   "goods_name": "创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）"
					// }
				]
			}
		},
		methods: {
			handleSearch: async function() {

				//判断输入商品名称是否为空
				if (!this.inputVal) {
					uni.showToast({
						title: '输入商品名称不能为空',
						icon: "none"
					})
					return false;
				}
				//请求后台拿数据
				const goods_list = await this.$request({
					url: "/goods/qsearch",
					data: {
						query: this.inputVal
					}
				})
				//判断一下goods_list 是否为空
				if (goods_list.length === 0) {
					ui.showToast({
						title: "查无数据",
						icon: "none"
					})
				}
				this.goods_list = goods_list;
			}
		}
	}
</script>

<style lang="less">
	.search_center {
		margin-bottom: 15rpx;
	}

	.search_center .search_input {
		margin-top: 15rpx;
		margin-left: 18rpx;
		width: 599rpx;
		height: 61rpx;
		border-radius: 27rpx;
		display: flex;
		align-items: center;
		background-color: #e7e7e7;
		float: left;
	}

	.search_center .search_btn {
		float: left;
		width: 101rpx;
		height: 61rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #EA4350;
		border-radius: 8rpx;
		margin-top: 15rpx;
		margin-left: 15rpx;
		color: white;
		font-size: 25rpx;
	}
</style>
